<template>
  <div>
    <van-nav-bar left-text="返回" title="个人中心" left-arrow fixed @click-left="onClickLeft" />
    <van-row type="flex" class="nav-icon" >
      <van-col span="24">
        <div class="note-bg" ref ='notebg'>
          <img :src="bg_url" class="iconlogo" />
        </div>
      </van-col>
    </van-row>
    <div class="note-icon">
        <img :src="Center_url" class="nav_logo" :style="{ left: lefts + 'px' }" />
         <!-- <span :style="{ marginLeft: marginleft + 'px' }" ref ='noteautor' class="nav_logo" >{{title}}</span> -->
    </div>
    <div class="note-autor">
        <span :style="{ marginLeft: marginleft + 'px' }" ref ='noteautor'>{{title}}</span>
    </div>

    <van-row class="item">
      <van-col span="8" class="itemSpan" @click="perNotedata()">
        <span>消息通知</span>
      </van-col>
      <van-col span="8" class="itemSpan" @click="perSdata()">
        <span>收藏</span>
      </van-col>
      <van-col span="8" class="itemSpan" @click="perLdata()">
        <span>浏览历史</span>
      </van-col>
    </van-row>

    <van-row class="item">
      <van-col span="24" class="itemSpan" @click="updataInfo()">
        <span>个人信息维护</span>
      </van-col>
    </van-row>
    
    <van-row class="item">
      <van-col span="24" class="itemSpan" @click="chagPWD()">
        <span>修改密码</span>
      </van-col>
    </van-row>

    <van-row class="itemupload">
      <van-col span="24" class="itemSpan" @click="LoginOut()">
        <span class="upload">退出登录</span>
      </van-col>
    </van-row>

  </div>
</template>

<script>
export default {
  data() {
    return {
      name: this.name, //姓名
      EmpRoleName: this.EmpRoleName, //职位
      EmpDepName: this.EmpDepName, //部门
      EmpStatus: this.EmpStatus, //状态
      EmpPhoneNum1: this.EmpPhoneNum1, //
      sex: this.sex,
      lefts:'',
      title:'',
      marginleft:'',
      bg_url: require("@/assets/Image/bgurl.png"),
      Center_url: require("@/assets/Image/Personal _Center.png")
    };
  },
  methods: {
    //返回上一个页面
    onClickLeft() {
      this.$router.push("/home");
    },
    //跳转
    upload() {
      this.$router.push("/AddList");
    },
    //跳转到页面
    saveVideo() {
      this.$router.push("/VideoList");
    },
    //登出
    LoginOut(){
      this.pwdJ = {
          userid: JSON.parse(sessionStorage.getItem('PWD')).id ,
      };
      this.$axios({
        method: "post",
        url: "/api/User/LogOut",
        data: this.pwdJ
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code != 0) {
              this.$toast({
                duration: 800,
                message: "用户不存在"
              });
            }
            if (res.data.code == 0) {
              // this.$toast({
              //   duration: 800,
              //   message: "退出登录"
              // });
              this.$router.push("./Home");
              sessionStorage.removeItem('PWD');
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 800,
                message: "登录接口请求报错，请联系管理员"
              });
            }
            // console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });
    },
    //修改个人信息
    updataInfo(){
       this.$router.push("/UpdateUserInfo");
    },
    //修改密码
    chagPWD(){
       this.$router.push("/ChangePassword");
    },
    //跳转去收藏
    perSdata(){
      this.$router.push({
        path: "/overWorkList",
        query: {
          Lote: 1,
          title:'我的收藏'
        }
      });
    },
    //跳转去观看历史
    perLdata(){
      this.$router.push({
        path: "/overWorkList",
        query: {
          Lote: 0,
          title:'浏览历史'
        }
      });
    },
    //跳转去消息通知
    perNotedata(){
      this.$router.push({
        path: "/notice",
        query: {
          notice: 0,
          title:'消息通知'
        }
      });
    },
    //获取收藏数据
    GetUserFavorites(){
      // this.pwdJ = {
      //     userid: JSON.parse(sessionStorage.getItem('PWD')).id ,
      // };
      this.$axios({
        method: "post",
        url: "/api/User/GetUserFavorites",
        data: this.pwdJ
      })
        .then(res => {
          console.log(res);
          if (res.status == 200) {
            if (res.data.code != 0) {
              this.$toast({
                duration: 800,
                message: "用户不存在"
              });
            }
            if (res.data.code == 0) {
              this.$toast({
                duration: 800,
                message: "登录成功"
              });
              this.$router.push("./Home");
              sessionStorage.removeItem('PWD');
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (err.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(err.response.data);
            console.log(err.response.status);
            if (err.response.status == 500) {
              this.$toast({
                duration: 800,
                message: "登录接口请求报错，请联系管理员"
              });
            }
            // console.log(err.response.headers);
          } else if (err.request) {
            // The request was made but no response was received
            // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
            // http.ClientRequest in node.js
            console.log(err.request);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("Error", err.message);
          }
          console.log(err.config);
        });
    }
  },
  mounted(){
     console.log(this.$refs.notebg.offsetWidth);
     //计算页面的logo的偏移值
     this.lefts =( this.$refs.notebg.offsetWidth - 50 ) / 2;
     console.log(this.$refs.noteautor.offsetWidth);
     //计算页面的title的marginleft
     this.marginleft = (this.$refs.notebg.offsetWidth  -  this.$refs.noteautor.offsetWidth ) / 2 + 5;
     console.log(this.marginleft );
  },
  //初始化页面
  created() {
      
    this.title = JSON.parse(sessionStorage.getItem('PWD')).userName;
    this.$emit("header", false);
    this.$emit("footer", false);
  }
};
</script>

<style lang="less" scoped>


.item {
  background-color: #fff;
  text-align: center;
  height: 50px;
  margin-top: 10px;
  .itemSpan {
    border: 1px solid #eee;
    span {
      font-size: 14px;
      line-height: 50px;
      border: 1px solid #eee;
    }
    // margin-left: ;
  }
}
.itemupload{
  background-color: #fff;
  text-align: center;
  height: 50px;
  margin-top: 10px;
   span {
      font-size: 14px;
      line-height: 50px;
      border: 1px solid #eee;
    }
    .ss{
      //  text-align: left;
      float: left;
      margin-left: 20px;
    }
}

.note-bg {
  img {
    width: 100%;
  }
}

.note-icon{
  text-align:center;
}
.nav_logo{
    position: absolute;
    // top: 50;
    top: 120px;
    left: 150px;
      // text-align: center;
    width: 50px;
    background-color: #fff;
    border: 5px solid #fff;
    border-radius: 50%;
}

.note-autor{
   position: absolute;
   top: 180px;
   margin-top: 20px;
  // margin-left: 160px;
  span{
    font-size: 20px;
    letter-spacing: 2px;
    color: #fff;
    
  }
}
</style>


